<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=320,user-scalable=no" />
    	<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
	</body>
</html>
<script type="text/javascript">
	
	var Game = function(){
		this.canvas = document.getElementById("canvas"),
		this.context = this.canvas.getContext("2d"),
		
		this.canvas.width = 300;
		this.canvas.height = 300;
		this.canvas.style.background = "#f0f0f0";
		
		this.fps;							//用于获取频率
		this.lastFramTime = 0;				//用于更新频率
		this.ren = new Image();				//------用于加载人的图片
		
		this.bg = new Image();	
		this.BACKGROUND_OFF = 2;
		this.bgoffset = this.BACKGROUND_OFF;
		
		
		this.spritesRen = [					//---------用于精灵动画
			{left:0,top:0,width:200,height:200,x:0,y:0},
			{left:200,top:0,width:200,height:200,x:0,y:0},
			{left:400,top:0,width:200,height:200,x:0,y:0},
			{left:600,top:0,width:200,height:200,x:0,y:0}
		]
		this.cellIndex = 0;	//用于精灵动作切换
		this.uiL = 0;		//用于模上精灵变化速度值
		this.cellX = 0;		//用于精灵位置变化
		this.fu = 1;		//用于精灵移动方向
	}
	Game.prototype = {					
		draw : function(now){
			suchen.backgroundOffset();
			suchen.bgVsb();
			
			
			suchen.spriteRen();
		},
		spriteRen : function(){
			if(this.cellIndex==this.spritesRen.length){
				this.cellIndex = 0;
			}
			this.context.drawImage(
		        this.ren, 
		        this.spritesRen[this.cellIndex].left, 	this.spritesRen[this.cellIndex].top,
		        this.spritesRen[this.cellIndex].width, this.spritesRen[this.cellIndex].height,
		        this.cellX, 						this.spritesRen[this.cellIndex].y,
		        this.spritesRen[this.cellIndex].width/2, this.spritesRen[this.cellIndex].height/2
			);
	        this.uiL++;
	        this.cellX += this.fu;
	        if(this.cellX >= (suchen.canvas.width - this.spritesRen[0].width)){
	        	this.fu = -1;
	        }else if(this.cellX <= 0){
	        	this.fu = 1;	
	        }
			if(this.uiL%6==0){
				this.cellIndex++;
			}
		},
		backgroundOffset : function(now){
			this.context.translate(-this.bgoffset,0);
			this.context.drawImage(this.bg,0,0,this.bg.width,this.canvas.height);
			this.context.drawImage(this.bg,this.bg.width,0,this.bg.width,this.canvas.height);
			this.context.translate(this.bgoffset,0);
		},
		bgVsb : function(){
			this.bgoffset += this.BACKGROUND_OFF;
			if (this.bgoffset < 0 || 
		          this.bgoffset > this.bg.width) {
		         this.bgoffset = 0;
		      }
		},
		getFps : function(now){
			var fps = 1 / (now - this.lastFramTime) * 1000;
			return fps;
		},
		clearCanvas : function(){
			suchen.context.clearRect(0,0,this.canvas.width,this.canvas.height)
		},
		animate : function(now){
			suchen.clearCanvas();
			suchen.getFps(now);
			suchen.draw(now);
			suchen.lastFramTime = now;
			requestAnimationFrame(suchen.animate);
		},
		init : function(){
			
			this.ren.src = "../img/sprite.png";
			this.bg.src = "../img/cc.png";
			this.bg.onload = function(){
				requestAnimationFrame(suchen.animate);
			}
		},
	}
	
	
	var suchen = new Game();
	suchen.init();
</script>